<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro=http://www.pollix.at/thymeleaf/shiro>
<head>
    <meta charset="UTF-8">
    <title>详细页面的组件</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}" media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>

</head>
<body>

<!--个人用户信息-->
<div th:fragment="userInfo">
    <!--基本信息-->
    <div th:fragment="userDetail" class="row">
        <div class="panel  col-md-10 col-md-offset-1">
            <br/>
            <h1 class="panel-title" >基本信息</h1>

            <div class="panel-body col-md-8 col-md-offset-2">
                <h5>用户名:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" th:value="${session.userDetail.username}" value="Jack">
                <h5>姓名:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="层某某" th:value="${session.userDetail.realname}">
                <h5>国家/地区:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="中国China">
                <h5>证件类型:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="中国居民身份证">
                <h5>证件号码:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="4406***********111" th:value="${session.userDetail.identify}">
                <br/>
                <span>验证状态:</span>
                <span shiro:hasRole="active" class="success">已通过</span>
                <span shiro:lacksRole="active" class="fail">未检验</span>
            </div>
        </div>

    </div>

    <!--联系方式-->
    <div th:fragment="userContact" class="row">
        <div class="panel  col-md-10 col-md-offset-1">
            <br/>
            <h1 class="panel-title" >联系方式</h1>

            <div class="panel-body col-md-8 col-md-offset-2">
                <h5>手机号:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="198****5952" th:value="${session.userDetail.phone}">

                <span shiro:hasRole="active" class="pass">已通过检验</span>

                <span shiro:lacksRole="active" class="fail">未检验</span>

                <h5>固定电话:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value=" ">
                <h5>邮箱:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="25******63@qq.com" th:value="${session.userDetail.email}">
                <span class="pass" shiro:hasRole="active">已激活</span>
                <span shiro:lacksRole="active" class="fail">未激活</span>
                <h5>地址:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="广东省****">
                <h5>邮编:</h5>
                <input class="form-control " type="text" placeholder="Disabled input here…" disabled="" value="528315">
                <br/>
            </div>
        </div>
    </div>
</div>

<!-- 账号安全 -->
<div th:fragment="accountSecurity" class="row">
    <div class="panel  col-md-10 col-md-offset-1">
        <br/>
        <h1 class="panel-title" >账号安全</h1>

        <div class="panel-body col-md-8 col-md-offset-2">

            <form>
                <div class="form-group">
                    <label for="previousPhone">原手机号:</label>
                    <input type="text" class="form-control" disabled id="previousPhone" value="198*****5471" th:value="${session.userDetail.phone}">
                    <span shiro:hasRole="active" class="success">已通过检验</span>
                    <span shiro:lacksRole="active" class="fail">未检验</span>
                </div>
                <div class="form-group">
                    <label for="currentPhone">新手机号:</label>
                    <input type="text" class="form-control" id="currentPhone" placeholder="请输入新手机号">
                </div>
                <hr/>
                <div class="form-group">
                    <label for="previousPw">旧密码:</label>
                    <input type="password" class="form-control" id="previousPw" placeholder="请输入新手机号">
                </div>
                <div class="form-group">
                    <label for="currentPw">新密码:</label>
                    <input type="password" class="form-control" id="currentPw" placeholder="请输入新手机号">
                </div>
                <span class="text-danger">只有输入了正确的旧密码才能修改新密码</span>
                <br/>
                <center>
                    <button type="submit" class="btn btn-default" style="margin-top: 15px;width: 100px;">确认</button>
                </center>
            </form>

        </div>

        <!--  -->
    </div>
</div>

<!-- 订单详情 -->
<div th:fragment="orderDetail" class="panel">
    <style>
        .hide-div{
            display: none;
        }
        .show-div{
            display: block;
        }
    </style>
    <br/>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active orders" data-ordertype="unpaid"><a href="javascript:;">未支付订单</a></li>
        <li role="presentation" class="orders" data-ordertype="paid"><a href="javascript:;">已支付订单</a></li>
        <li role="presentation" class="orders" data-ordertype="refund"><a href="javascript:;">已退款订单</a></li>
        <li role="presentation" class="orders" data-ordertype="finish"><a href="javascript:;">已完成订单</a></li>
        <li role="presentation" class="orders" data-ordertype="all"><a href="javascript:;">所有订单</a></li>
    </ul>
    <br/>

    <div id="orderPage" th:insert="components/detail/orderPage :: orderList">
<!--        展示页面-->
    </div>
    <script>
        $(".orders").each(function () {//为每一个元素绑定一个点击事件

            $(this).click(function () {
                //如果页面就是用户选择的页面则直接返回不需要请求
                if($(this).hasClass('active'))
                    return;

                let orderType = $(this).data('ordertype');
                let buttons = $('.orders');
                for(let i = 0; i<5;i++){
                    //移除激活状态
                    $(buttons[i]).removeClass('active');
                }
                $(this).addClass('active'); //当前按钮激活状态
                $('#orderPage').load('/detail/order/type/' + orderType);
            });
        });
    </script>
<!--    订单详情-->
</div>



</body>
</html>